// reset.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

select,
option {
    outline: 0;
    border: 0;
    -webkit-appearance: none;
}

/* 第一步: 定义变量 */
$black:black;
$red: red;
$green: green;
$blue: blue;
$orange: orange;
$purple: purple;
$fontSzie:.3rem;

/* 第二步: 定义主题 */
$themes-color: (
    default: (
            fontColor: $black,
            bgColor: $black,
            borderColor:1px solid $black,
            fontSize:$fontSzie
        ),
    red: (
            fontColor: $red,
            bgColor: $red,
            borderColor:1px solid $red,
            fontSize:$fontSzie
        ),
    green: (
            fontColor: $green,
            bgColor: $green,
            borderColor:1px solid $green,
            fontSize:$fontSzie
        ),
    blue: (
            fontColor: $blue,
            bgColor: $blue,
            borderColor:1px solid $blue,
            fontSize:$fontSzie
        ),
    orange: (
            fontColor: $orange,
            bgColor: $orange,
            borderColor:1px solid $orange,
            fontSize:$fontSzie
        ),
    purple: (
            fontColor: $purple,
            bgColor: $purple,
            borderColor:1px solid $purple,
            fontSize:$fontSzie
        ),
);

       
// 第三步: 定义混合指令, 切换主题,并将主题中的所有规则添加到theme-map中
@mixin themify() {
    @each $theme-name, $map in $themes-color {
        // & 表示父级元素  !global 表示覆盖原来的
        .theme-#{$theme-name} & {
            $theme-map: () !global;
            // 循环合并键值对
            @each $key,$value in $map {
                $theme-map: map-merge($theme-map, ($key: $value)) !global;
            }
            // 表示包含 下面函数 themed()
            @content;
        }
    }
}
@function themed($key) {
    @return map-get($theme-map, $key);
}

// mixin
@mixin flex-ui {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@mixin space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@mixin center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@mixin align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@mixin flex-direction-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

@mixin flex-wrap {
    flex-wrap: wrap;
}

@mixin flex {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
}